<template>
  <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="false">
    <el-menu-item @click="clickMenu(item)" v-for="item in noChildren" :key="item.name" :index="item.name">
      <i :class="`el-icon-${item.icon}`"></i>
      <span slot="title">{{ item.label }}</span>
    </el-menu-item>
    <el-submenu v-for="item in hasChildren" :key="item.label" :index="item.label">
      <template slot="title">
       <i :class="`el-icon-${item.icon}`"></i>
        <span slot="title">{{ item.label }}</span>
      </template>
      <el-menu-item-group v-for="subItem in item.children" :key="subItem.path">
         <el-menu-item @click="clickMenu(subItem)" :index="subItem.path">
            <i :class="`el-icon-${subItem.icon}`"></i>
           <span slot="title">{{ subItem.label }}</span>
         </el-menu-item>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  data(){
    return {
      menuData: [
        {
          path: "/input",
          name: "input",
          label: "设备入库",
          icon: "input",
          url: "Input/Input",
        },
        {
          path: "/output",
          name: "output",
          label: "设备出库",
          icon: "output",
          url: "Output/Output",
        },
        {
          path: "/return",
          name: "return",
          label: "设备退货",
          icon: "back",
          url: "Return/Return",
        },
        {
          path: "/fix",
          name: "fix",
          label: "设备维修",
          icon: "weixiu",
          url: "Fix/Fix",
        },
        {
          path: "/rework",
          name: "rework",
          label: "库存返工",
          icon: "rework",
          url: "Rework/Rework",
        },
        {
          path: "/check",
          name: "check",
          label:"设备查询",
          icon:"chaxun",
          url:"Check/Check",
        },
        {
          path:"/box",
          name:"box",
          label:"箱子管理",
          icon:"box",
          url:"Box/Box",
        },
        {
          label: "出库plus",
          icon: "output",
          children: [
            {
              path: "/out",
              name: "out",
              label: "出库界面",
              icon: "chukuchaxun",
              url: "Output_plus/Out",
            },
            {
              path: "/device",
              name: "device",
              label: "出库设备",
              icon: "shebei",
              url: "Output_plus/Device",
            },
          ],
        },
      ]
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    //点击菜单
    clickMenu(item){
      console.log(item);
      //当页面路由和跳转路由不一致的情况才允许跳转
      if(this.$route.path !== item.path && !(this.$route.path === '/input' && (item.path === '/'))){
        this.$router.push(item.path);
      }
    }
  },
  computed: {
    //没有子菜单
    noChildren(){
      return this.menuData.filter(item => !item.children)
    },
    //有子菜单
    hasChildren(){
      return this.menuData.filter(item => item.children)
    },
  }
}
</script>
<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-menu {
  height: 100vh;
}
.el-icon-home{
  background: url(../assets/image/路径.png);
  background-repeat: no-repeat;
}
.el-icon-home:before{
  content: "替";
  visibility: hidden;
}
//.el-icon-input{
//  background: url(../assets/image/入库.png);
//  background-repeat: no-repeat;
//}
//.el-icon-input:before{
//  content: "替";
//  visibility: hidden;
//}
//.el-icon-output{
//  background: url(../assets/image/出库.png);
//  background-repeat: no-repeat;
//}
//.el-icon-output:before{
//  content: "替";
//  visibility: hidden;
//}
.el-icon-fix{
  background: url(../assets/image/维修.png);
  background-repeat: no-repeat;
}
.el-icon-fix:before{
  content: "替";
  visibility: hidden;
}
//.el-icon-rework{
//  background: url(../assets/image/返工.png);
//  background-repeat: no-repeat;
//}
//.el-icon-rework:before{
//  content: "替";
//  visibility: hidden;
//}
//.el-icon-back{
//  background: url(../assets/image/退货.png);
//  background-repeat: no-repeat;
//}
//.el-icon-back:before{
//  content: "替";
//  visibility: hidden;
//}
.el-icon-scan{
  background: url(../assets/image/扫描.png);
  background-repeat: no-repeat;
}
.el-icon-scan:before{
  content: "替";
  visibility: hidden;
}
.el-icon-check{
  background: url(../assets/image/查询.png);
  background-repeat: no-repeat;
}
.el-icon-check:before{
  content: "替";
  visibility: hidden;
}
</style>